import React from 'react';
import {dark, light} from '../../config';
import {pxToDp} from '../../utils/stylesKits';
import {
  Appearance,
  StyleSheet,
  TouchableOpacity,
  TextInput,
  View,
} from 'react-native';
import {Icon} from '@ant-design/react-native';
import {connect} from 'react-redux';

/**
 * APP TopSearch 组件
 * @colorScheme 用户手机主题模式 是否开启了黑夜模式
 * */
const colorScheme = Appearance.getColorScheme() === 'dark' ? dark : light;

class TopSearch extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {}

  componentDidUpdate(prevProps, prevState) {}

  componentWillUnmount() {}
  render() {
    return (
      <View style={{...styles.container, ...this.props.style}}>
        <TouchableOpacity
          style={styles.searchBtn}
          onPress={() => console.log('onPress')}>
          <TextInput
            style={styles.searchInput}
            value={'搜粪'}
            editable={false}
          />
          <Icon name="search" style={styles.searchIcon} />
        </TouchableOpacity>
      </View>
    );
  }
}

const mapStateToProps = state => ({});
const mapDispatchToProps = {};

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: pxToDp(50),
    paddingTop: pxToDp(10),
    paddingBottom: pxToDp(10),
    paddingLeft: pxToDp(20),
    paddingRight: pxToDp(20),
  },
  searchBtn: {
    position: 'relative',
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  searchInput: {
    width: '100%',
    height: '100%',
    padding: 0,
    paddingLeft: pxToDp(35),
    paddingRight: pxToDp(10),
    borderRadius: pxToDp(5),
    backgroundColor: colorScheme.backgroundColorA,
    color: colorScheme.color,
  },
  searchIcon: {
    position: 'absolute',
    left: pxToDp(10),
    color: colorScheme.color,
    fontSize: pxToDp(22),
    opacity: 0.7,
  },
});

export default connect(mapStateToProps, mapDispatchToProps)(TopSearch);
